<template>
    <div class="video">
        <video src="./video/bg.mp4" muted="muted" loop="loop" autoplay="autoplay" class="action"></video>
    </div>
    <div class="container">  
        <p class="projectName">{{pageInfo.projectName}}</p>
        <!-- connomLogin登录 -->
        <!-- <div v-if="visible" class="commonLogin">
            
            <commonLoginVue></commonLoginVue>
            
        </div> -->
        <!-- sms登录 -->
        <!-- <div class="smsLogin"  v-else>

            <smsVue></smsVue>
        </div> -->

        <component :is="pageInfo.component"></component>

        <div class="change">
            <svg class="icon icon-phone" aria-hidden="true">
                <use :xlink:href=icon></use>
            </svg>
            <b class="changeName" @click="change">{{pageInfo.changeName}}</b>
        </div>
    </div>
      
      
</template>

<script setup>
import commonLoginVue from '../../components/login/commonLogin.vue';
import smsVue from '../../components/login/smsLogin.vue';
import {ref,markRaw, watchEffect,computed} from "vue"

// 用于标记是否常规登录
let visible = ref(true)

// 点击切换登录方式
let change = function(){
  visible.value = !visible.value
}

// markRaw可以将响应式的ref变成常规对象
// 声明一个页面数据
let pageInfo = ref({
  projectName:'CRM系统',  // 标题
  loginType:"common", // 登入类型
  changeName:'切换手机号登录',  // 切换的描述信息
  component: markRaw(commonLoginVue)  // 要切换的组件
})



// /vue 3的动态组件，涌讨：结合组件这个组件来实现动态切换
// //通过结合高级侦听器和vue 3的动态组件来实现组件切换
watchEffect(()=>{
  // 常规登录
  if(visible.value){
    pageInfo.value = {
      projectName:'CRM系统',  // 标题
      loginType:"common", // 登入类型
      changeName:'切换手机号登录',  // 切换的描述信息
      component: markRaw(commonLoginVue)  // 要切换的组件
    } 
  }else{
    // 手机短信登录
    pageInfo.value = {
      projectName:'短信登录',  // 标题
      loginType:"sms", // 登入类型
      changeName:'用户名密码登录',  // 切换的描述信息
      component: markRaw(smsVue)  // 要切换的组件
    }
  }
})





// 根据登录模式的切换，派发图标的名称
let icon = computed(()=>{
  return visible.value ? '#icon-shouji2' : '#icon-mima'
})
</script>


<style lang="less" scoped>
// 定制组件，修改样式的思路
// 1、找到对应组件结构的类名
// 2、重新编写样式，覆盖原来的样式

// 样式修改不成功的因素和解决方案
// 1、类名是否正确
// 2、确认权重够不够 !important
// 3、是否需要使用深度选择器  xxx :deep(选择器) scoped样式，层级嵌套比较深的时候

.video{
  video{
    position: fixed;
    left: 0;
    width: 1300px;
  }
}

.container{
  position: fixed;
  right: 34%;
  top: 13%;
  width: 400px;
  height: 450px;
  background-color: rgba(0, 0, 0, .3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  border-radius: 5px;
}
.projectName{
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  margin:0 0 60px 0;

}

.commonLogin{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.smsLogin{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.change{
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;

}



.changeName{
  text-decoration: underline;
  cursor: pointer;
  color: #fff;
  
}

</style>